<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户主界面</title>
    <style>
        /* 全局样式 */
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #f4f4f9, #e0e0e0);
            margin: 0;
            padding: 0;
            color: #333;
        }

        /* 头部样式 */
        .header {
            background: linear-gradient(135deg, #6a11cb, #2575fc);
            color: white;
            text-align: center;
            padding: 30px 0;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            margin-bottom: 30px;
        }

        .header h1 {
            font-size: 32px;
            margin: 0;
            letter-spacing: 1px;
        }

        /* 内容区域样式 */
        .content {
            padding: 20px;
            max-width: 1000px;
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
        }

        /* 投诉列表样式 */
        .complaint-list {
            background-color: white;
            border-radius: 15px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            padding: 25px;
            flex: 1 1 60%;
            min-width: 300px;
        }

        .complaint-list h2 {
            font-size: 24px;
            color: #444;
            margin-bottom: 20px;
        }

        .complaint-list table {
            width: 100%;
            border-collapse: collapse;
        }

        .complaint-list th,
        .complaint-list td {
            border: 1px solid #ddd;
            padding: 12px;
            text-align: left;
        }

        .complaint-list th {
            background-color: #f2f2f2;
            font-weight: 600;
        }

        .complaint-list tr:hover {
            background-color: #f9f9f9;
            transition: background-color 0.3s ease;
        }

        /* 撤销投诉按钮样式 */
        .complaint-list button {
            padding: 8px 15px;
            background-color: #dc3545;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .complaint-list button:hover {
            background-color: #c82333;
        }

        /* 投诉表单样式 */
        .complaint-form {
            background-color: white;
            border-radius: 15px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            padding: 25px;
            flex: 1 1 30%;
            min-width: 300px;
        }

        .complaint-form h2 {
            font-size: 24px;
            color: #444;
            margin-bottom: 20px;
        }

        .complaint-form label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
        }

        .complaint-form input,
        .complaint-form textarea {
            width: 100%;
            padding: 12px;
            margin-bottom: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-size: 16px;
            transition: border-color 0.3s ease;
        }

        .complaint-form input:focus,
        .complaint-form textarea:focus {
            border-color: #007BFF;
            outline: none;
        }

        .complaint-form input[type="submit"] {
            background-color: #007BFF;
            color: white;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .complaint-form input[type="submit"]:hover {
            background-color: #0056b3;
        }
    </style>
</head>

<body>
<div class="header">
    <h1>用户主界面</h1>
</div>
<div class="content">
    <div class="complaint-list">
        <h2>已投诉邮件列表</h2>
        <table>
            <thead>
            <tr>
                <th>投诉标题</th>
                <th>投诉人</th>
                <th>被投诉人</th>
                <th>投诉内容</th>
                <th>处理状态</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="complaint-list-body">
            <!-- 这里将通过JavaScript动态加载投诉数据 -->
            </tbody>
        </table>
    </div>
    <div class="complaint-form">
        <h2>发送投诉邮件</h2>
        <form id="complaint-form" action="/user/sendComplaint" method="post">
            <label for="complaintTitle">投诉标题:</label>
            <input type="text" id="complaintTitle" name="complaintTitle" required>
            <label for="complaintComplaining">投诉人:</label>
            <input type="text" id="complaintComplaining" name="complaintComplaining">
            <label for="complaintComplained">被投诉人:</label>
            <input type="text" id="complaintComplained" name="complaintComplained" required>
            <label for="complaintContent">投诉内容:</label>
            <textarea id="complaintContent" name="complaintContent" required></textarea>
            <label>
                <input type="checkbox" name="complaintHidden" value="hidden"> 匿名投诉
            </label>
            <input type="submit" value="提交投诉">
        </form>
    </div>
</div>
<script>
    // 页面加载完成后执行
    window.onload = function () {
        fetchComplaints();
    };

    // 从后端获取投诉信息
    function fetchComplaints() {
        fetch('http://localhost:8080/user/mainUser')
            .then(response => {
                if (!response.ok) {
                    throw new Error('网络响应异常');
                }
                return response.json();
            })
            .then(data => {
                const tableBody = document.getElementById('complaint-list-body');
                // 清空表格内容
                tableBody.innerHTML = '';
                data.forEach(complaint => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                            <td>${complaint.title}</td>
                            <td>${complaint.complaining}</td>
                            <td>${complaint.complained}</td>
                            <td>${complaint.content}</td>
                            <td>${complaint.status}</td>
                            <td>
                                <button onclick="cancelComplaint(${complaint.id})">撤销投诉</button>
                            </td>
                        `;
                    tableBody.appendChild(row);
                });
            })
            .catch(error => {
                console.error('请求失败:', error);
            });
    }

    // 撤销投诉
    function cancelComplaint(complaintId) {
        if (confirm('确定要撤销该投诉吗？')) {
            fetch(`/user/blackComplaint?complaintId=${complaintId}`, {
                method: 'POST'
            })
                .then(response => {
                    if (response.ok) {
                        alert('投诉撤销成功');
                        // 重新加载投诉列表
                        fetchComplaints();
                    } else {
                        alert('投诉撤销失败');
                    }
                })
                .catch(error => {
                    console.error('请求失败:', error);
                    alert('请求出错，请稍后重试');
                });
        }
    }
</script>
</body>

</html>